iT邦幫忙

2022 iThome 鐵人賽

DAY 15
0
自我挑戰組

前端菜鳥的react初體驗系列 第 15

前端菜鳥的react初體驗 Day15-Hook-useEffect

  • 分享至 

  • xImage
  •  

今天是第十五天,不知道是不是因為確診越來越不舒服的關係,
我感到前所未有的絕望,覺得自己離放棄近在咫尺。

但我還是打開了這個頁面,要來談談Hook,談談useEffect
然後打開文件看到第一句我的心態就炸裂了。

Effect Hook 讓你可以使用 function component 中的 side effect:

這是一段乍看之下每個字我都看得懂,但何在一起我卻完全不知道在說什麼的話。
https://ithelp.ithome.com.tw/upload/images/20220930/20152660gUh82AEjVG.jpg

好,回到最初的起點,先來看一下什麼是function component

這個是function component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

文件是這麼說的:

它接受一個「props」物件並回傳一個 React element。我們稱之為 function component,因為它本身就是一個 JavaScript function。

這個是Class Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

雖然還搞不太清楚這兩個之間的具體差別是什麼,但總之我們知道,如果要用hook,我們要選用上面那種function component來建立我的組件。

那,side effect又是甚麼??我只知道我本人現在吃藥的副作用有頭暈口乾^^
文件是這麼說的

資料 fetch、設定 subscription、或手動改變 React component 中的 DOM 都是 side effect 的範例。
React component 有兩種常見的 side effect:一種不需要執行清除,另一種則需要。

好,應該不是只有我看不懂。

於是我去求助維基百科,維基百科是這麼說的

In computer science, an operation, function or expression is said to have a side effect if it modifies some state variable value(s) outside its local environment, which is to say if it has any observable effect other than its primary effect of returning a value to the invoker of the operation.

粗淺的理解,大概就是如果這個function,修改了function之外的值,或是做了與function無關的事情就是一種副作用。
像是console.log改變了主控台的輸出,也是一種副作用。

其他還有一些常見的副作用們:

  1. 向api發送請求來得到一些資料
  2. 與瀏覽器互動(document或是window)
  3. 使用一些計時功能(setInterval等)

那麼,React為什麼需要專門有一個hook來處理這件事情?

因為,透過useEffect,我們可以跟外部的世界進行互動,但不影響component自己的渲染。
那些需要跟外部互動的副作用,就交給useEffect來處理。

寫到這裡,好像懂了點什麼,總之,就是為了避免一些副作用(我以前甚至不知道程式有副作用),所以我們用useEffect來處理會產生副作用的事物。

去了半條老命我終於看懂(也可能其實沒懂)了文件的第一句話了,真是世界和平嗚嗚。

那麼,我們明天,還會見的!

參考資料
https://ithelp.ithome.com.tw/articles/10185780
https://zh.wikipedia.org/zh-tw/%E5%89%AF%E4%BD%9C%E7%94%A8_(%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6)
https://ithelp.ithome.com.tw/articles/10224270
https://www.freecodecamp.org/news/react-useeffect-absolute-beginners/


上一篇
前端菜鳥的react初體驗 Day14-Hook
下一篇
前端菜鳥的react初體驗 Day16-Hook-useEffect(2)
系列文
前端菜鳥的react初體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言